<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>TEST GA Algorithms</title>
    <style type="text/css">
		h1 { align:center }
    </style>
</head>
<body >
	<h1>GA Algorithm</h1>

	<table border=1 cellpadding=1 cellspacing=5  width=400>
		<tr>
			<td> Population size: </td>
			<td> <input type=text id=populationSize /></td>
		</tr>

		<tr>
			<td> Acceptable threshold (between 0 and 0.99): </td>
			<td> <input type=text id=delta value=0.15 /></td>

		</tr>

		<tr>
			<td> <input type=button value="Add population" onclick="addPopulation()"/></td>
			<td> <input type=button value="Start generation" onclick="startGeneration()"/></td>
		</tr>
		<tr>
					<td> <input type=button value="Stop generation" onclick="stopGeneration()" /></td>
					<td> </td>
		</tr>

		<div width=500 height=400 style="color:rgb(10,255,10)">
			<font size=40 >Target color is this: rgb(10,245,10).</font>
		</div>
		<br/><br/><br/>

		<div id="targetDiv" width=500 height=400 style="color:rgb(255,255,255)">
			 <font size=40 >Best color produced so far</font>
		</div>

	</table>

	<div id="tableau" style="position:fixed;right:10px;top:10px;color: black;background-color: white; border-color:black; border-style:solid; border-width: 1px">
	        <em>Best score so far:</em> <span id="bestScore">0</span> <br/>
		<em>Current score:</em> <span id="currentScore">0</span> <br/>
	        <em>Number of generations:</em> <span id="numGen">0</span> <br/>
	        <em>Current population size:</em> <span id="popSizeCurrent">0</span><br/>
	        <em></em> <span id="bestX"></span> <br/>
	        <em></em> <span id="bestY"></span> <br/>
	        <em></em> <span id="bestZ"></span>
    </div>

    <script type="text/javascript"  src="GA.js"></script>
	<script>
		// Implementation - override fitness function
		ga.calculateFitness = function(chromosome) {
			// needs to be overridden for each specific GA algorithm
			// returns value between 0 and 1


			// get the bits
			var bits = chromosome.getBits();

			var r = bits.substr(0,8);
			var g = bits.substr(8,8);
			var b = bits.substr(16);

			var diff = Math.abs( parseInt(r,2) - 10 )/255;
			diff+= Math.abs( parseInt(g,2) - 245 )/255;
			diff+= Math.abs( parseInt(b,2) - 10 )/255;

			if(diff == 0) return 1;
			return 1-diff/3;

		}

		var colors;
		var timer;

		function addPopulation() {
			var popSize = document.getElementById("populationSize").value;
			document.getElementById('bestScore').innerHTML = 0.0;

			if(!popSize || isNaN(popSize)) {
				return alert('Invalid or missing population size');
			}
			colors = new ga.ChromosomePool(popSize,24,popSize);
			document.getElementById('popSizeCurrent').innerHTML = popSize;
		}

		function startGeneration() {
			var nGenerations = 0;
			document.getElementById('bestScore').innerHTML = 0.0;
			timer = setInterval(function(){

				colors.runGeneration();
				nGenerations++;

				var bestScore = parseFloat(document.getElementById('bestScore').innerHTML);
				if(bestScore < colors.getMaximumFitness()) {
					document.getElementById('bestScore').innerHTML = colors.getMaximumFitness();
				}

				document.getElementById('numGen').innerHTML = nGenerations;
				document.getElementById('currentScore').innerHTML = colors.getMaximumFitness();
				document.getElementById('numGen').innerHTML = nGenerations;

				display();

				var threshold = parseFloat(document.getElementById('delta').value);
				if( (1-colors.getMaximumFitness()) <= threshold) {
					stopGeneration();
				}

			}, 100);
			//alert('We are off to the races!');
		}

		function display() {
		  var red;
		  var green;
		  var blue;

		  colors.pool.sort(colors.pool[0].sort);
		  var bits = colors.pool[colors.poolSize-1].getBits();

		  var r = bits.substr(0,8);
		  var g = bits.substr(8,8);
		  var b = bits.substr(16);

		  red = parseInt(r,2);
		  green = parseInt(g,2);
		  blue = parseInt(b,2);

		  var val = "color: rgb(" + red + "," + green + "," + blue + ")";

		  document.getElementById('targetDiv').setAttribute('style', val);

		}

		function stopGeneration() {
			clearInterval(timer);
			//alert('Generations stopped!');
		}

	</script>
</body>
</html>